<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--使用事件绑定机制向子组件当中传递方法-->
			<com @func="show"></com>
			{{msg}}
		</div>
		<template id="com">
			<div>
				<h1>这是一个子组件</h1>
				<input type="button"  value="按钮" @click="myclick" />
			</div>
		</template>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					msg:'这是父组件上的数据',
				},
				methods:{
					show(data){
						//console.log('调用了父组件------'+data);
						this.msg=data;
					}
				},
				components:{
					com:{
						template:'#com',
						props:["parentmsg"],
						data:function() {
							return {
								sunmsg:"子组件的数据"
							};
						},
						methods:{
							myclick(){
								//show();
								//点击子组件的按钮的时候如何触发父组件上定义的方法
								//$emit()触发；调用的意思
								//调用父组件的方法，并向父组件传参
								this.$emit("func",this.sunmsg)
							},
						}
						
					},
					
				}
			});
		</script>
	</body>
</html>